<template>
  <a-card>
    <a-table
      :columns="columns"
      :row-key="(record) => record.key"
      :dataSource="list"
      :pagination="pagination"
      :loading="loading"
      @change="getRecordList"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'actionType'">
          <span style="font-weight: bold">{{ text }}</span>
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          <a-badge color="green" :text="formatDate(text)"></a-badge>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { recordList } from '@/apis/record';
import moment from 'moment';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';

// interface recordType {
//   recordId: number;
//   actionType: string;
//   extInfo: string;
//   createTime: string;
// }

const columns: ColumnsType = [
  {
    title: 'ID',
    dataIndex: 'recordId',
    key: 'recordId',
    width: 100
  },
  {
    title: '操作',
    dataIndex: 'actionType',
    key: 'actionType',
    width: 150
  },
  {
    title: '额外信息',
    dataIndex: 'extInfo',
    key: 'extInfo'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  }
];

export default defineComponent({
  data() {
    return {
      list: [],
      order: 1,
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      loading: true
    };
  },
  setup() {
    return {
      columns
    };
  },
  created() {
    this.getRecordList(this.pagination, undefined, undefined);
  },
  methods: {
    getRecordList(pagination: any, filters: any, sorter: any) {
      const { current, pageSize } = pagination;
      const { order } = this;
      this.loading = true;
      recordList(current, pageSize, order).then((res: any) => {
        const { list, total } = res.data;
        this.list = list;
        this.pagination = pagination;
        this.pagination.total = total;
        this.loading = false;
      });
    },
    formatDate(date: string) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    }
  }
});
</script>
